 
<script language="JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FusionCharts v3 Documentation</title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>

<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
  <tr>
    <td>
      <h2 class="pageHeader">Using FusionCharts with JSP &gt; Charting Data from
        an Array </h2>
    </td>
  </tr>
  <tr>
    <td valign="top" class="text">
      <p>In this section, we'll show you how to use FusionCharts and JSP to plot
        charts from data contained in JSP arrays. We'll cover the following examples
        here:</p>
      <ul>
        <li>Creating a single series chart from data contained in arrays</li>
        <li>Creating a multi-serise chart from data contained in arrays </li>
      </ul>
      <p><strong>Before you go further with this page, we recommend you to please see the previous section &quot;Basic Examples&quot; as we start off from concepts explained in that page. </strong></p>
      <p class="highlightBlock">The code examples contained in this page are present
        in <span class="codeInline">Download Package &gt; Code &gt; JSP &gt; ArrayExample</span>
        folder. </p>
    </td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="header">Creating a single series chart from data contained in arrays</td>
  </tr>
  <tr>
    <td valign="top" class="text">The code to create a single series chart is
      contained in <span class="codeInline">SingleSeries.jsp</span> and can be
      listed as under: </td>
  </tr>
  <tr>
    <td valign="top" class="codeBlock">
      &lt;%<br>
        <span class="codeComment">/*We've included ../Includes/FusionCharts.jsp, which contains functions<br>
        to help us easily create the charts that can be embedded.*/</span><br>
        %&gt;<br>
        &lt;%@ include file=&quot;../Includes/FusionCharts.jsp&quot;%&gt;<br>
		
      &lt;HTML&gt;<br>
      &nbsp;&nbsp;&nbsp;&lt;HEAD&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TITLE&gt;	FusionCharts - Array Example using Single Series Column 3D Chart&lt;/TITLE&gt;<br />	  
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;SCRIPT LANGUAGE=&quot;Javascript&quot; SRC=&quot;../../FusionCharts/FusionCharts.js&quot;&gt;&lt;/SCRIPT&gt;<br>
      &nbsp;&nbsp;&nbsp;&lt;/HEAD&gt;<br>
      &nbsp;&nbsp;&nbsp;&lt;BODY&gt;<br>
      &nbsp;&nbsp;&nbsp;&lt;%<br>
      &nbsp;&nbsp;&nbsp;<span class="codeComment">/*In this example, we plot a single series chart from data contained<br>
      &nbsp;&nbsp;&nbsp;in an array. The array will have two columns - first one for data label<br>
      &nbsp;&nbsp;&nbsp;and the next one for data values.<br>
      <br>
      &nbsp;&nbsp;&nbsp;Let's store the sales data for 6 products in our array. We also store<br>
      &nbsp;&nbsp;&nbsp;the name of products. </span>*/<br>
      &nbsp;&nbsp;&nbsp;String[][] arrData = new String[6][2];<br>
      &nbsp;&nbsp;&nbsp;<span class="codeComment">//Store Name of Products</span><br>
      &nbsp;&nbsp;&nbsp;arrData[0][0] = &quot;Product A&quot;;<br>
      &nbsp;&nbsp;&nbsp;arrData[1][0] = &quot;Product B&quot;;<br>
      &nbsp;&nbsp;&nbsp;arrData[2][0] = &quot;Product C&quot;;<br>
      &nbsp;&nbsp;&nbsp;arrData[3][0] = &quot;Product D&quot;;<br>
      &nbsp;&nbsp;&nbsp;arrData[4][0] = &quot;Product E&quot;;<br>
      &nbsp;&nbsp;&nbsp;arrData[5][0] = &quot;Product F&quot;;<br>
      <br>
      &nbsp;&nbsp;&nbsp;<span class="codeComment">//Store sales data</span><br>
      &nbsp;&nbsp;&nbsp;arrData[0][1] = &quot;567500&quot;;<br>
      &nbsp;&nbsp;&nbsp;arrData[1][1] = &quot;815300&quot;;<br>
      &nbsp;&nbsp;&nbsp;arrData[2][1] = &quot;556800&quot;;<br>
      &nbsp;&nbsp;&nbsp;arrData[3][1]= &quot;734500&quot;;<br>
      &nbsp;&nbsp;&nbsp;arrData[4][1] = &quot;676800&quot;;<br>
      &nbsp;&nbsp;&nbsp;arrData[5][1] = &quot;648500&quot;;
      <p> &nbsp;&nbsp;&nbsp;<span class="codeComment">//Now, we need to convert this data into XML. We convert using string concatenation.</span><br>
        &nbsp;&nbsp;&nbsp;String strXML;<br>
        &nbsp;&nbsp;&nbsp;int i=0;<br>
        &nbsp;&nbsp;&nbsp;<span class="codeComment">//Initialize &lt;chart&gt; element</span><br>
        &nbsp;&nbsp;&nbsp;strXML = &quot;&lt;chart caption='Sales by Product' numberPrefix='$' formatNumberScale='0'&gt;&quot;;<br>
       &nbsp;&nbsp;&nbsp;<span class="codeComment">//Convert data to XML and append</span><br>
       &nbsp;&nbsp;&nbsp;for(i=0;i&lt;arrData.length-1;i++){<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strXML = strXML + &quot;&lt;set label='&quot; +arrData[i][0] + &quot;' 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value='&quot; + arrData[i][1] + &quot;' /&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;}<br>
        &nbsp;&nbsp;&nbsp;<span class="codeComment">//Close &lt;chart&gt; element</span><br>
        &nbsp;&nbsp;&nbsp;strXML = strXML + &quot;&lt;/chart&gt;&quot;;
		&nbsp;&nbsp;&nbsp;<br>
        &nbsp;&nbsp;&nbsp;<br>
        &nbsp;&nbsp;&nbsp;<span class="codeComment">//Create the chart - Column 3D Chart with data contained in strXML</span><br>
        &nbsp;&nbsp;&nbsp;String chartCode= createChart(&quot;../../FusionCharts/Column3D.swf&quot;, 
        &nbsp;&nbsp;&nbsp;&quot;&quot;, strXML, &quot;productSales&quot;, 600, 300, false, false);<br>
        &nbsp;&nbsp;&nbsp;%&gt; <br>
		&nbsp;&nbsp;&nbsp;&lt;%=chartCode%&gt; <br>
		<br>
        &nbsp;&nbsp;&nbsp;&lt;/BODY&gt;<br>
        &lt;/HTML&gt;</p>
    </td>
  </tr>
  <tr>
    <td valign="top" class="text">
      <p>In the above example, we first include <span class="codeInline">FusionCharts.js</span>
        file to enable us embed the chart using JavaScript. We also include <span class="codeInline">FusionCharts.jsp</span>
        to help us easily create the charts that can be embedded.</p>
      <p>Thereafter, we define an JSP array <span class="codeInline">arrData</span>
        to store sales data for 6 different products. The array has two columns
        - first one for data label and the next one for data values. </p>
      <p>We define a variable <span class="codeInline">strXML</span> to store
        the entire XML data. To build the XML, we iterate through the array and
        use string concatenation. Finally, we create the chart using <span class="codeInline">createChart()</span>
        method and pass <span class="codeInline">strXML</span> as <span class="codeInline">dataXML
        and render this chart</span>. </p>
    <p>When you view the chart, you'll see a chart as under: </p></td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/Code_ArraySS.jpg" width="584" height="287" /></td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="header">Creating a multi-series chart from data contained in arrays </td>
  </tr>
  <tr>
    <td valign="top" class="text">Let us now create a multi-series chart from
      data contained in arrays. We create a file <span class="codeInline">MultiSeries.jsp</span>
      with the following code: </td>
  </tr>
  <tr>
    <td valign="top" class="codeBlock">
      <p><br>
        &lt;%@ include file=&quot;../Includes/FusionCharts.jsp&quot;%&gt;</p>
      <p>&lt;HTML&gt;<br>
        &nbsp;&nbsp;&nbsp;&lt;HEAD&gt;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TITLE&gt;FusionCharts - Array 
        Example using Multi Series Column 3D<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Chart<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/TITLE&gt;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;SCRIPT LANGUAGE=&quot;Javascript&quot; 
        SRC=&quot;../../FusionCharts/FusionCharts.js&quot;&gt;&lt;/SCRIPT&gt;<br>
        &nbsp;&nbsp;&nbsp;&lt;/HEAD&gt;</p>
        &nbsp;&nbsp;&nbsp;&lt;BODY&gt;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;%<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">/*In this example, we plot a multi series chart from data contained<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;in an array. The array will have three columns - first one for data label
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(product)<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and the next two for data values. The first data value column would store
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sales information<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for current year and the second one for previous year.<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Let's store the sales data for 6 products in our array. We also store<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;the name of products. <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/ </span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;String[][] arrData = new String[6][3];<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">//Store Name of Products</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arrData[0][0] = &quot;Product A&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arrData[1][0] = &quot;Product B&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arrData[2][0] = &quot;Product C&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arrData[3][0] = &quot;Product D&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arrData[4][0] = &quot;Product E&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arrData[5][0] = &quot;Product F&quot;;<br>
        
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">//Store sales data</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arrData[0][1] = &quot;567500&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arrData[1][1] = &quot;815300&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arrData[2][1] = &quot;556800&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arrData[3][1]= &quot;734500&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arrData[4][1] = &quot;676800&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arrData[5][1] = &quot;648500&quot;;<br>
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">//Store sales data for previous year</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arrData[0][2]= &quot;547300&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arrData[1][2] = &quot;584500&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arrData[2][2]= &quot;754000&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arrData[3][2]= &quot;456300&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arrData[4][2]= &quot;754500&quot;;<br>
      	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arrData[5][2]= &quot;437600&quot;;<br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;String&nbsp;strXML = &quot;&lt;chart 
      caption='Sales by Product' numberPrefix='$' formatNumberScale='1' rotateValues='1' 
      placeValuesInside='1' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;decimals='0' &gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">//Initialize &lt;categories&gt; element - necessary to generate a multi-series chart</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;String strCategories = &quot;&lt;categories&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">//Initiate &lt;dataset&gt; elements</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;String strDataCurr = &quot;&lt;dataset seriesName='Current Year'&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;String strDataPrev = &quot;&lt;dataset seriesName='Previous Year'&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">//Iterate through the data </span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(int i=0;i&lt;arrData.length-1;i++){<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">//Append &lt;category name='...' /&gt; to strCategories</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strCategories = strCategories + &quot;&lt;category name='&quot; + arrData[i][0]
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot;' /&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">//Add &lt;set value='...' /&gt; to both the datasets</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strDataCurr = strDataCurr + &quot;&lt;set value='&quot; + arrData[i][1]
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot;' /&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strDataPrev = strDataPrev + &quot;&lt;set value='&quot; + arrData[i][2]
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot;' /&gt;&quot;; <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">//Close &lt;categories&gt; element</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strCategories = strCategories + &quot;&lt;/categories&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">//Close &lt;dataset&gt; elements</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strDataCurr = strDataCurr + &quot;&lt;/dataset&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strDataPrev = strDataPrev + &quot;&lt;/dataset&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">//Assemble the entire XML now</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strXML = strXML + strCategories + strDataCurr + strDataPrev + &quot;&lt;/chart&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">//Create the chart - MS Column 3D Chart with data contained in strXML</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;String chartCode= createChart(&quot;../../FusionCharts/MSColumn3D.swf&quot;,
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&quot;, strXML, &quot;productSales&quot;, 600, 300, false, false);<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;%&gt;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;%=chartCode%&gt; &lt;BR&gt;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
        &nbsp;&nbsp;&nbsp;&lt;/BODY&gt;<br>
        &lt;/HTML&gt;
    </td>
  </tr>
  <tr>
    <td valign="top" class="text">
      <p>In the above example, we first include <span class="codeInline">FusionCharts.js</span>
        file to enable us embed the chart using JavaScript. We also include <span class="codeInline">FusionCharts.jsp</span>
        to help us easily create the charts that can be embedded.</p>
      <p>Thereafter, we define an JSP array <span class="codeInline">arrData</span>
        to store sales data for 6 different products. The array has three columns
        - first one for data label (product) and the next two for data values.
        The first data value column would store sales information for current
        year and the second one for previous year.</p>
      <p>We define a variable <span class="codeInline">strXML</span> to store the entire XML data. We also define <span class="codeInline">strCategories</span>, <span class="codeInline">strDataCurr</span> and <span class="codeInline">strDataPrev</span> variables to store XML data for categories elements, current year's dataset and previous year's dataset respectively. To build the XML, we iterate through the array and using string concatenation. We concatenate the entire XML finally in <span class="codeInline">strXML</span>. </p>
      <p>Finally, we create the chart using <span class="codeInline">createChart()</span>
        method and pass <span class="codeInline">strXML</span> as <span class="codeInline">dataXML
        and then render it</span>. </p>
    <p>When you view the chart, you'll see a chart as under: </p></td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/Code_ArrayMS.jpg" alt="" width="584" height="287" /></td>
  </tr>
  <tr>
    <td valign="top" class="highlightBlock">In <span class="codeInline">Download
      Package &gt; Code &gt; JSP &gt; ArrayExample</span>, we've more example
      codes to create Stacked and Combination Charts too, which have not been
      explained here, as they're similar in concept. You can directly see the
      code and understand them easily. </td>
  </tr>
</table>
</body>
</html>
